<template>
  <div class="ticketlist">
    <div class="ticketTop" v-show="!childvalue">
      <div class="title">我的票券</div>
      <div>
        <router-link to="/Personal/Ticketlist?childvalue=3">全部票券&nbsp;>></router-link>
      </div>
    </div>
    <div class="ticketTop" v-show="childvalue">
      <el-button
        v-for="item in tickettype"
        :key="item.id"
        :plain="tabid==item.id?false:true"
        type="success"
        @click="handtab(item.id)"
      >{{item.name}}</el-button>
    </div>
    <el-table v-loading="loading" :data="ticketlist" style="width: 100%">
      <el-table-column prop="showCode" label="券号" width="180"></el-table-column>
      <el-table-column label="订单内容">
        <template slot-scope="scope">
          <img class="tickimg" :src="scope.row.skuPic" alt="img">
          <el-tag v-if="scope.row.flagType">{{scope.row.flagType | filterflagType}}</el-tag>
          <span>{{scope.row.goodsSkuName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额（元）" width="120">
        <template slot-scope="scope">{{scope.row.otherMarkerPrice | filterPrice}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
      <el-table-column prop="expiryDate" label="有效截至时间" width="180"></el-table-column>
    </el-table>
    <span class="pagin">
      <el-pagination
        v-show="totalpage>10"
        layout="prev, pager, next"
        :total="totalpage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </span>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "ticketlist",
  data() {
    return {
      tpage: 1,
      tabid: 1,
      totalpage: 0,
      childvalue: "",
      loading: false,
      ticketlist: [],
      tickettype: [
        {
          name: "全部票券",
          id: 1
        },
        {
          name: "已赠送票券",
          id: 2
        },
        {
          name: "已领取票券",
          id: 3
        },
        {
          name: "已失效票券",
          id: 4
        }
      ]
    };
  },
  computed: {
    ...mapState(["token", "userId"])
  },
  filters: {
    filterTag(value, row) {
      if (value == 0) {
        return "未使用";
      } else {
        return "已使用";
      }
    },
    filterPrice(val) {
      if (val) {
        let _val = "￥" + val.toFixed(2);
        return _val;
      } else {
        return "--";
      }
    },
    filterflagType(val) {
      if (val == 4) {
        return "砍价";
      } else if (val == 5) {
        return "秒杀";
      } else if (val == 7) {
        return "拼团";
      } else if(val ==6){
        return "抽奖"
      } else if(val ==1){
        return "普通"
      }
    },
    filtertabid(val){
      if(val == 1){

      }else if(val ==2){

      }else if(val ==3){

      }else if(val ==4){

      }
    }
  },
  methods: {
    //选择某类票券
    handtab(val) {
      this.tabid = val;
      this.tpage = 1;
      this.getticketlist(val);
    },
    handleCurrentChange(val) {
      this.tpage = val;
      this.getticketlist(this.tabid);
    },
    //获取票券列表
    getticketlist(val) {
      let _Url = "",
        _parms = {},
        _value = "",
        _this = this;
      if (val == 1 || val == 4) {
        _parms = {
          userId: this.userId,
          page: this.tpage,
          rows: 10,
          isUsed: val == 1 ? "0" : "1"
        };
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url ="/api/website/orderCoupon/listForSendNew?" + _value;
      } else if (val == 2 || val == 3) {
        _parms = {
          rows: 10,
          page: this.tpage
        };
        if (val == 2) {
          _parms.sendUserId = this.userId;
        } else if (val == 3) {
          _parms.receiveUserId = this.userId;
        }
        for (var key in _parms) {
          _value += key + "=" + _parms[key] + "&";
        }
        _value = _value.substring(0, _value.length - 1);
        _Url ="/api/website/orderCoupon/listCoupon?" + _value;
      }
      this.loading = true;
      this.$axios({
        url: _Url,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          _this.ticketlist = res.data.data.list;
          this.totalpage = res.data.data.total;
        }
      });
    }
  },
  created() {
    this.getticketlist(1);
    this.childvalue = this.$route.query.childvalue;
  }
};
</script>

<style lang="less">
.ticketlist {
  .ticketTop {
    margin-bottom: 10px;
    div {
      display: block;
      float: left;
      height: 24px;
      line-height: 24px;
      font-weight: 700;
      text-align: center;
      a {
        float: right;
      }
    }
    div:nth-child(1) {
      width: 7%;
      border-bottom: 3px solid #0089dc;
    }
    div:nth-child(2) {
      width: 93%;
      border-bottom: 3px solid#666;
    }
  }
  .tickimg {
    height: 60px;
    width: 60px;
    border-radius: 8rpx;
  }
  .pagin {
    float: right;
  }
}
</style>


